<template>
    <div class="page-container">
        <div class="echarts-container" ref="main"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            myEcharts:null
        }
    },
    computed:{
        themeStatus(){
            return this.$store.state.theme
        }
    },
    watch:{
        themeStatus(){
            this.myEcharts.dispose()
            this.initEcharts()
            this.getData()
            this.screen()
        }
    },
    mounted() {
        this.initEcharts()
        this.getData()
        this.screen()
        window.addEventListener('resize',this.screen)
    },
    methods: {
        screen(){
            this.myEcharts.resize()
            let width = this.$refs.main.offsetWidth
            let num = width/100*6
            let options = {
                title:{
                    textStyle:{
                        fontSize:num
                    }
                }
            }
            this.myEcharts.setOption(options)
        },
        initEcharts(){
            let main = this.$refs.main
            this.myEcharts = this.$echarts.init(main,this.themeStatus)
            /** @type EChartsOption */
            let options = {
                title: {
                    text: '主要地区农作物种植增长趋势',
                    left: '10',
                    top: '10',
                },
                grid: {
                    left:'13%',
                    right:'10%',
                    top:'22%',
                    bottom:'10%',
                },
                legend: {
                    show: true,
                    icon: 'circle',
                    left: '10',
                    top: '12%',
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,//两侧的留白策略
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: true,
                    },
                },
            }
            this.myEcharts.setOption(options)
        },
        async getData(){
            let dataList = await this.$http('/api/CropGrowthTrend')
            let monthData = dataList.data[0].content.map(item =>{
                return item.month
            })
            let seriesData = dataList.data.map(item=>{
                let data1 = item.content.map(item1=>{
                    return item1.area
                })
                return{
                    type:'line',
                    name:item.city,
                    data:data1,
                    smooth:true, //是否开启平滑处理
                }
            })
            this.setEcharts(monthData,seriesData)
        },
        setEcharts(monthData,seriesData){
            let options = {
                xAxis:{
                    data:monthData
                },
                series:seriesData
            }
            this.myEcharts.setOption(options)
        }
    },
    
}
</script>
<style scoped></style>